<template>
  <div class="box">
    <div >

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.goods_id">
        <img :src="item.image_src" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类栏 -->
    <van-grid>
      <van-grid-item
        v-for="(item, index) in navList"
        :key="index"
        text="分类"
        to="/"
      >
        <img :src="item.image_src" alt="" />
      </van-grid-item>
    </van-grid>
    <!-- 商品栏 -->
    <div v-for="(item, index) in productList" :key="index">
      <div>
        <img class="title" :src="item.floor_title.image_src" alt="" />
      </div>
      <div class="class-info">
        <div class="left-box">
          <div class="left1">
            <img :src="item.product_list[0].image_src" alt="" />

          </div>
          <div class="right2">
            <div class="top">
              <img :src="item.product_list[1].image_src" alt="" />

            </div>
            <div class="down">
              <img :src="item.product_list[2].image_src" alt="" />

            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="top2">
            <img :src="item.product_list[3].image_src" alt="" />

          </div>
          <div class="down2">
            <img :src="item.product_list[4].image_src" alt="" />

          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { getSwiperAPI, getNavAPI, getImgAPI } from '@/api/home'
export default {
  name: 'MyHome',
  data () {
    return {
      value: '',
      swiperList: [],
      navList: [],
      productList: []
    }
  },
  created () {
    this.getSwiper()
    this.getNav()
    this.getImg()
  },
  methods: {
    async getSwiper () {
      const res = await getSwiperAPI()
      this.swiperList = res.message
    },
    async getNav () {
      const res = await getNavAPI()
      this.navList = res.message
    },
    async getImg () {
      const res = await getImgAPI()
      this.productList = res.message
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  padding:100px 0 50px 0;
 width: 100vw;
 height: 70vh;
 overflow: auto;
position: fixed;
left: 0;
top: 0;
z-index: -100;
}

// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 170px;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
// 导航
.van-grid-item {
  img {
    height: 60px;
    width: 60px;
  }
}
::v-deep {
  [class*=van-hairline]::after {
  border: 0 ;
}
}

// 分类栏
.title{
  height: 50px;
  width: 100vw;
}
.class-info {
  padding: 0 5px;
  .left-box {
    float: left;
    .left1 {
      float: left;
      background-color: red;
      height: 200px;
      width: 115px;
      margin-right: 8px;
      border-radius: 4%;
      img {
        height: 200px;
        width: 115px;
      }
    }
    .right2 {
      float: right;

      .top {
        width: 115px;
        height: 95px;
        background-color: blueviolet;
        margin-bottom: 10px;
        border-radius: 4%;
        img {
          width: 115px;
          height: 95px;
        }
      }
      .down {
        width: 115px;
        height: 95px;
        background-color: #39a9ed;
        border-radius: 4%;
        img {
          width: 115px;
          height: 95px;
        }
      }
    }
  }
  .right-box {
    float: right;
    .top2 {
      width: 115px;
      height: 95px;
      background-color: blueviolet;
      margin-bottom: 10px;
      border-radius: 4%;
      img {
        width: 115px;
        height: 95px;
      }
    }
    .down2 {
      width: 115px;
      height: 95px;
      background-color: #39a9ed;
      border-radius: 4%;
      img {
        width: 115px;
        height: 95px;
      }
    }
  }
}
</style>
